import { Component, OnInit, Input, Output, EventEmitter, Injectable } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { _HttpClient } from '@delon/theme';

@Component({
    selector: 'app-table',
    templateUrl: './table.component.html',
    styles: [`
        :host ::ng-deep .ant-input:focus{box-shadow:0 0 0 transparent}
    `]
})

@Injectable({ providedIn: 'root' })

export class TableComponent implements OnInit {
    @Output() private clickDetail = new EventEmitter();
    @Input() headData: any;
    @Input() tableId: any;
    @Input() tableScroll: any;
    @Input() plainData: any;

    apiUrl = '';
    apiParam = '';

    bodyData: any = [];
    ObjectKeys = [];

    allChecked = false;
    indeterminate = false;
    loading = true;
    displayData = [];
    selectedValue = '20';
    pageTotal = '';
    rowTotalTable = '0';
    pageValue = '1';

    constructor(
        public msg: NzMessageService,
        private http: _HttpClient
    ) { }

    ngOnInit() { }

    loadList(url, param, callback?) {
        this.apiUrl = url;
        this.apiParam = param;
        let newParam = '';
        if (param.indexOf('?') === -1) {
            param = param.replace('&', '?');
        }
        newParam += param;

        this.loading = true;
        this.bodyData = [];
        // 请求后获取的数据
        this.http.get(url + newParam).subscribe((res: any) => {
            if (!res.code) {
                this.bodyData = res.data;
                this.pageTotal = res.count;
                this.rowTotalTable = res.count;
                switch (this.tableId) {
                    case 'win':
                        // 天窗类型skyType
                        this.bodyData.forEach((item, index) => {
                            switch (item.skyType) {
                                case 'U': item.skyTypeName = '垂直天窗'; break;
                                case 'V': item.skyTypeName = 'V行天窗'; break;
                                case 'X': item.skyTypeName = '协议修天窗'; break;
                            }
                            // 表格合并
                            let rowName = '';
                            let rowSpan = '1';
                            let startRow = '';
                            if (item.skyTypeName === rowName) {
                                item.rowSpan = 0;
                                this.bodyData[startRow].rowSpan = this.bodyData[startRow].rowSpan + 1;
                            } else {
                                rowName = item.skyTypeName;
                                rowSpan = '1';
                                startRow = index + '';
                                item.rowSpan = 1;
                            }
                        });
                        break;
                }
                // 字段和表头排序 
                this.ObjectKeys = this.plainData ? this.plainData : Object.keys(this.bodyData);
                callback(this.bodyData);
            }
            this.loading = false;
        });
    }
    bgColor(i) {
        return { 'background-color': i === this.bodyData.length - 1 ? '#d4d4d4' : '' };
    }
    getAllData() {
        return this.displayData;
    }

    detail(data, item) {
        this.clickDetail.emit(JSON.stringify(data) + '|' + item);
    }

    rowChangeTable(ev) {
        this.pageValue = ev;
        this.loadList(this.apiUrl, this.apiParam);
    }

    selectedChange() {
        this.pageValue = '1';
        this.loadList(this.apiUrl, this.apiParam);
    }

    currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void {
        this.displayData = $event;
        this.refreshStatus();
    }

    refreshStatus(): void {
        const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true);
        const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked);
        this.allChecked = allChecked;
        this.indeterminate = (!allChecked) && (!allUnChecked);
    }

    checkAll(value: boolean): void {
        this.displayData.forEach(data => {
            if (!data.disabled) {
                data.checked = value;
            }
        });
        this.refreshStatus();
    }

}
